<template>
  <view class="warp">
    <view class="index_top">
      <view class="index_warp">
        <view class="logo">
          <image src="~@/static/jitai/logo.png"/>
        </view>
        <navigator class="prize_box" hover-class="none" url="/pages/site/certificate">
          <view class="icon p1">
            <view class="o">多项国家发明专利</view>
            <view class="s">研发产品</view>
          </view>
          <view class="icon p2">
            <view class="o">室内环镜污染治理</view>
            <view class="s">甲级资质</view>
          </view>
        </navigator>
        <u-swiper :autoplay="false" :list="list" bg-color="#fff" circular key-name="image" nextMargin="30"
                  previousMargin="30" radius="5"></u-swiper>
      </view>
    </view>
    <view class="index_icon">
      <navigator class="item" hover-class="none" url="/pages/user/order">
        <image src="~@/static/jitai/index_icon/icon_1.png"/>
        <view class="span">我的订单</view>
      </navigator>
      <navigator class="item" hover-class="none" url="/pages/user/share_code">
        <image src="~@/static/jitai/index_icon/icon_2.png"/>
        <view class="span">我的二维码</view>
      </navigator>
      <navigator class="item" hover-class="none" url="/pages/goods/classify">
        <image src="~@/static/jitai/index_icon/icon_3.png"/>
        <view class="span">商城分类</view>
      </navigator>
      <navigator class="item" hover-class="none" url="#">
        <image src="~@/static/jitai/index_icon/icon_4.png"/>
        <view class="span">精选推荐</view>
      </navigator>
    </view>

    <uni-card>
      <view slot="title">
        <uni-section :title-color="'#ffa911'" style="padding: 0" title="推荐店铺" title-font-size="16px">
          <view slot="decoration" style="padding-right: 5px;">
            <zui-svg-icon :color="'#ffa911'" height="25px" icon="shangdian" width="25px"/>
          </view>
          <view slot="right" class="dw-list-sub-title">
            <navigator url="/pages/shop/index">
              更多
              <uni-icons color="#999" size="13" type="right"></uni-icons>
            </navigator>
          </view>
        </uni-section>
      </view>
      <u-grid
          :border="false"
          :col="2"
      >
        <u-grid-item v-for="(item,idx) in rec_shop_list" :key="idx">
          <navigator :url="'/pages/shop/detail?shop_id='+item.shop_id" class="shop-item" hover-class="none">
            <image :src="item.headimg_url" mode="heightFix"></image>
            <text class="dw-list-main-title">{{ item.nickname }}</text>
            <text class="dw-list-sub-title">
              <text v-for="(c,ci) in item.main_categories" :key="ci">{{ c }}</text>
            </text>
            <text class="dw-list-sub-title">上架商品
              <text class="dw-number">{{ item.product_count }}</text>
              件
            </text>
          </navigator>
        </u-grid-item>
      </u-grid>
    </uni-card>

    <uni-card>
      <view slot="title">
        <uni-section :title-color="'#ffa911'" style="padding: 0" title="推荐好物" title-font-size="16px">
          <view slot="decoration" style="padding-right: 5px;">
            <zui-svg-icon :color="'#ffa911'" height="25px" icon="tuijianhaowu" width="25px"/>
          </view>
          <view slot="right" class="dw-list-sub-title">
            <navigator url="/pages/goods/list">
              更多
              <uni-icons color="#999" size="13" type="right"></uni-icons>
            </navigator>
          </view>
        </uni-section>
      </view>
      <navigator class="goods-item" hover-class="none" url="/pages/goods/info?id=1">
        <image mode="widthFix" src="~@/static/jitai/pic/IMG_7060.png"></image>
        <view class="infos">
          <text class="dw-list-main-title title">负氧离子车用套盒</text>
          <text class="dw-list-sub-title">一次尽享 清新舒畅</text>
          <text class="dw-number price">￥2980.00</text>
        </view>
      </navigator>
      <navigator class="goods-item" hover-class="none" url="/pages/goods/info?id=1">
        <image mode="widthFix" src="~@/static/jitai/pic/shibe.jpg"></image>
        <view class="infos">
          <text class="dw-list-main-title title">济态富氢水杯</text>
          <text class="dw-list-sub-title">大道以至简为上，大局以落实为先</text>
          <text class="dw-number price">￥1980.00</text>
        </view>
      </navigator>
    </uni-card>

  </view>
</template>

<script>

import {getRecShopList} from "@/api/shop";

export default {
  data() {
    return {
      list: [{
        image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
        title: '昨夜星辰昨夜风，画楼西畔桂堂东'
      },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        {
          image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
          title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
        }
      ],
      rec_shop_list: [],
    }
  },
  onLoad() {
    this.getRecShopList()
  },
  methods: {
    // 获取推荐店铺
    getRecShopList() {
      getRecShopList({
        page_size: 2,
      }).then(res => {
        console.log("首页推荐店铺：", res)
        this.rec_shop_list = res.list
      })
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background: #f1f1f1;
}

.index_top {
  width: 100%;
  height: 320px;
  background: #fff;
}

.logo {
  width: 93.5px;
  padding: 19px;

  image {
    width: 93.5px;
    height: 30px;
  }
}

.prize_box {
  //width: 337px;
  height: 55px;
  background: rgba($color: #fff, $alpha: 0.3);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 0 15px;
  box-sizing: border-box;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 19px 14px 19px;

  .icon {
    color: #fff;

    .o {
      width: 100px;
      height: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px !important;
    }

    .s {
      font-size: 14px;
    }
  }

  .p1 {
    background: url(~@/static/jitai/p_2.png) no-repeat left center;
    background-size: auto 90%;
    padding-left: 50px;
  }

  .p2 {
    background: url(~@/static/jitai/p_3.png) no-repeat left center;
    background-size: auto 100%;
    padding-left: 40px;
  }
}

.index_icon {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 14px 19px;

  .item {
    text-align: center;

    image {
      width: 43px;
      height: 43px;
      margin: 0 auto;
    }
  }

  .span {
    color: #a3a3a3;
  }
}

.shop-item {
  display: flex;
  flex-direction: column;

  image {
    width: 150px;
    height: 150px;
    border-radius: 4px;
  }
}

.goods-item {
  display: flex;
  padding-bottom: 10px;

  image {
    width: 96px;
    height: 96px;
    border-radius: 8px;
  }

  .infos {
    display: flex;
    flex-direction: column;
    padding-left: 10px;

    .title {
      font-size: 14px;
      padding: 2px 0 5px 0;
    }

    .price {
      padding-top: 15px;
    }
  }

}

</style>
